import React, { Component, PropTypes } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import PxToDp from '../../utils/PxToDp';
import FontFamilys from '../../utils/FontFamilys';
import { userStageSelect } from '../../actions/MyCustomerDetailAction';
import fetchUserStage from '../../actions/UserStageAction';

const buttonText = [
  {
    id: 1,
    text: '初步沟通',
    active: false,
  },
  {
    id: 2,
    text: '已报价',
    active: false,
  },
  {
    id: 3,
    text: '预约试驾',
    active: false,
  },
  {
    id: 4,
    text: '到店体验',
    active: false,
  },
  {
    id: 5,
    text: '已成交',
    active: false,
  },
  {
    id: 6,
    text: '放弃购买',
    active: false,
  },
  {
    id: 7,
    text: '其他',
    active: false,
  },
];
let stageNum = 0;
let dataId = '';

class Btn extends Component {
  render() {
    // const backgroundColor = this.props.selected ? '#418cff' : '#f0f0f0';
    const bgc = this.props.selected ? '#C5DCFF' : '#f0f0f0';
    const color = this.props.selected ? '#418cff' : '#121212';
    return (
      <TouchableOpacity
        activeOpacity={0.6}
        selected={this.props.selected}
        style={[styles.button, { backgroundColor: bgc }]}
        onPress={() => this.props.onPress()}
      >
        {this.props.selected ? this.props.children : null}
        <Text style={[styles.btnText, { color }]}>{this.props.text}</Text>

      </TouchableOpacity>
    );
  }
}

class UserstageBtn extends Component {
  static propTypes = {
    stageNum: PropTypes.number,
    userId: PropTypes.number,
  };

  componentWillMount() {
    if (this.props.stageNum) {
      stageNum = this.props.stageNum - 1;
      const selected = [];
      for (let i = 0; i < 7; i += 1) {
        if (stageNum === i) {
          selected.push(false);
        }
      }
      selected[stageNum] = true;
      this.state = {
        selected,
      };
    } else {
      this.state = {
        selected: [false, false, false, false, false, false, false],
      };
    }
  }

  _btnSelect(index, data) {
    const arr = [];
    for (let i = 0; i < 7; i += 1) {
      arr.push(false);
    }
    arr[index] = true;
    this.setState({ selected: arr });
    dataId = data.id;
  }

  _comfim() {
    this.props.Comfirm();
    this.props.dispatch(fetchUserStage(dataId, this.props.userId));
    this.props.dispatch(userStageSelect(dataId, this.props.userId));
  }

  render() {
    return (
      <View style={[styles.flex, styles.bgColor]}>
        <View style={styles.wrapper}>
          <LinearGradient
            colors={['#7b6aff', '#4cbbff']}
            style={[styles.linerModal, styles.row]}
            start={{ x: 0, y: 1 }}
            end={{ x: 1, y: 1 }}
          >
            <View style={styles.lineL} />
            <Text style={styles.climT}>选择客户阶段</Text>
            <View style={styles.lineL} />
          </LinearGradient>

          <View style={styles.buttonWrapper}>
            {
              buttonText.map((data, index) => (
                <Btn
                  key={data.id}
                  text={data.text}
                  selected={this.state.selected[index]}
                  right={index % 2 === 0 ? PxToDp(12) : 0}
                  onPress={() => this._btnSelect(index, data)}
                />
              ))
            }
          </View>

          <TouchableOpacity
            activeOpacity={0.6}
            style={styles.climBtn}
            onPress={() => this._comfim()}
          >
            <Text style={styles.commitT}>确定</Text>
          </TouchableOpacity>

        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bgColor: {
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
    width: PxToDp(285),
    height: PxToDp(310),
  },
  wrapper: {
    alignItems: 'center',
    width: PxToDp(285),
    height: PxToDp(310),
    backgroundColor: '#fff',
  },
  buttonWrapper: {
    width: PxToDp(285),
    flexWrap: 'wrap',
    flexDirection: 'row',
    marginTop: PxToDp(13),
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
  },
  button: {
    height: PxToDp(25),
    backgroundColor: '#f0f0f0',
    borderRadius: PxToDp(100),
    justifyContent: 'center',
    marginRight: PxToDp(10),
    marginTop: PxToDp(10),
    borderStyle: 'solid',
    paddingLeft: PxToDp(15),
    paddingRight: PxToDp(15),
  },
  btnText: {
    color: '#121212',
    fontSize: PxToDp(12),
    fontFamily: FontFamilys(),
  },
  linerModal: {
    width: PxToDp(285),
    height: PxToDp(60),
    alignItems: 'center',
    justifyContent: 'center',
  },
  lineL: {
    width: PxToDp(65),
    backgroundColor: '#a5c9ec',
    height: PxToDp(1),
  },
  climT: {
    color: '#ffffff',
    fontFamily: FontFamilys(),
    fontSize: PxToDp(16),
    backgroundColor: 'transparent',
    marginLeft: PxToDp(12),
    marginRight: PxToDp(12),
  },
  climBtn: {
    width: PxToDp(152),
    height: PxToDp(38),
    borderRadius: PxToDp(100),
    borderStyle: 'solid',
    borderColor: '#458fff',
    borderWidth: PxToDp(1),
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: PxToDp(40),
  },
  commitT: {
    color: '#458fff',
    fontSize: PxToDp(16),
    fontFamily: FontFamilys(),
  },
});

export default UserstageBtn;
